常用标签和属性
概述
在HTML中，标签（Tags）和属性（Attributes）是构建网页结构和内容的基本元素。标签定义了网页的各个部分，而属性则提供了关于这些部分的额外信息。本教程将详细介绍常用的HTML标签和属性，帮助你更好地理解和使用它们。
常用标签
1. 标题标签（Headings）
标题标签用于定义网页的标题和子标题。HTML提供了六个级别的标题标签，从<h1>到<h6>，其中<h1>是最高级别的标题，<h6>是最低级别的标题。
<h1>这是主标题</h1>
<h2>这是副标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
2. 段落标签（Paragraph）
段落标签<p>用于定义文本段落。
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
3. 链接标签（Anchor）
链接标签<a>用于创建超链接，指向其他网页或网页内的某个部分。
<a href="https://www.example.com">访问示例网站</a>
4. 图像标签（Image）
图像标签<img>用于在网页中插入图片。
<img src="image.jpg" alt="示例图片">
5. 列表标签（Lists）
HTML支持两种类型的列表：有序列表（<ol>）和无序列表（<ul>）。列表项使用<li>标签定义。
<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
</ul>
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
</ol>
6. 表格标签（Table）
表格标签用于创建表格结构。表格由<table>标签定义，行由<tr>标签定义，单元格由<td>标签定义。
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
常用属性
1. id 属性
id属性用于唯一标识一个元素。每个id值在文档中必须是唯一的。
<p id="uniqueParagraph">这是一个唯一的段落。</p>
2. class 属性
class属性用于为元素分配一个或多个类名，便于CSS和JavaScript选择和操作。
<p class="highlight">这是一个高亮的段落。</p>
3. style 属性
style属性用于直接在HTML元素上应用内联样式。
<p style="color: red;">这是一个红色的段落。</p>
4. src 属性
src属性用于指定图像、音频、视频等媒体文件的URL。
<img src="image.jpg" alt="示例图片">
5. href 属性
href属性用于指定链接的目标URL。
<a href="https://www.example.com">访问示例网站</a>
6. alt 属性
alt属性用于为图像提供替代文本，当图像无法显示时，替代文本将显示。
<img src="image.jpg" alt="示例图片">
实践练习
练习1：创建一个简单的网页
- 使用
<h1>标签创建一个主标题。 - 使用
<p>标签创建两个段落。 - 使用
<a>标签创建一个指向外部网站的链接。 - 使用
<img>标签插入一张图片，并为其添加alt属性。
练习2：创建一个列表
- 使用
<ul>标签创建一个无序列表，包含三个列表项。 - 使用
<ol>标签创建一个有序列表，包含三个列表项。
练习3：创建一个表格
- 使用
<table>标签创建一个包含两行两列的表格。
总结
通过本教程，你已经学习了HTML中常用的标签和属性。这些基础知识是构建网页的基石。在后续的课程中，我们将进一步探讨HTML5的新特性和更高级的网页设计技术。
下一步
接下来，我们将学习HTML5的新特性概览，了解HTML5带来的新功能和改进。继续前进，探索更多关于HTML和网页设计的知识吧！